<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-17 14:38:56
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-11-17 18:07:12
-->
<template>
  <div>
    <el-form
      :model="staffFrom"
      ref="staffFrom"
      :rules="staffRules"
      label-position="top"
      class="agreeForm"
    >
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="staffFrom.nickName"
          placeholder="请输入员工真实姓名"
          style="width: 330px"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phonenumber">
        <el-input
          v-model="staffFrom.phonenumber"
          placeholder="请输入员工手机号（登录账号）"
          style="width: 330px"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input
          v-model="staffFrom.email"
          placeholder="请输入邮箱"
          style="width: 330px"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select
          v-model="staffFrom.sex"
          placeholder="请选择性别"
          style="width: 330px"
        >
          <el-option
            v-for="item in gander"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门" prop="deptId">
        <el-select
          v-model="staffFrom.deptId"
          placeholder="请选择公司部门"
          style="width: 330px"
        >
          <el-option
            v-for="item in detData"
            :key="item.id"
            :label="item.deptName"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色" prop="roleIds">
        <el-select
          v-model="staffFrom.roleIds"
          placeholder="请选择角色"
          style="width: 330px"
          multiple
        >
          <el-option
            v-for="item in roleData"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="直属上级">
        <el-select
          v-model="staffFrom.parentId"
          placeholder="请选择直属上级"
          style="width: 330px"
        >
          <el-option
            v-for="item in upData"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职务">
        <el-input
          v-model="staffFrom.post"
          placeholder="请输入员工职务"
          style="width: 330px"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDeptList, getRoleList, getList } from "@/api/sys";
// 验证手机号的校验规则
let checkMobile = (rule, value, callback) => {
  // 验证手机号的正则表达式
  const regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/;

  if (regMobile.test(value)) {
    // 合法的手机号
    return callback();
  }
  // 不合法
  callback(new Error("请输入正确的手机号"));
};
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      detData: [], //组织列表
      roleData: [], //角色列表
      upData: [], //直属上级
      staffFrom: {
        userId: "",
        nickName: "",
        phonenumber: "",
        email: "",
        sex: "",
        deptId: "",
        roleIds: [],
        parentId: "",
        post: "",
      },
      gander: [
        {
          label: "男",
          value: 0,
        },
        {
          label: "女",
          value: 1,
        },
      ],
      staffRules: {
        nickName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 3 个字符", trigger: "blur" },
        ],
        phonenumber: [
          {
            validator: checkMobile,
            required: true,
            trigger: "blur",
          },
        ],
        deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
        roleIds: [{ required: true, message: "请选择角色", trigger: "change" }],
        parentId: [
          { required: true, message: "请选择直属上级", trigger: "change" },
        ],
        post: [{ required: true, message: "请输入员工职务", trigger: "blur" }],
      },
    };
  },
  created() {
    this.staffFrom.nickName = this.item.applyName;
    this.staffFrom.phonenumber = this.item.applyPhone;
    this.staffFrom.userId = this.item.id;
    this.getOrList();
    this.getRoleList();
    this.getList();
  },
  methods: {
    // 获取直属上级
    getList() {
      getList().then((res) => {
        this.upData = res.rows;
      });
    },
    // 获取角色列表
    getRoleList() {
      getRoleList().then((res) => {
        this.roleData = res.rows;
      });
    },
    // 获取组织列表
    getOrList() {
      getDeptList().then((res) => {
        this.detData = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.agreeForm {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
  }
}
</style>